selectType.html{extend name="layout/layout" /}

{block name="navbar"}{/block}


{block name="style"}
<style>
	.mui-icon-arrowright{
		font-size: 14px;
		color:#333;
	}
	
	.business-name{
		color: #404445;
	}
	
	.icon-dianpu{
		font-size:20px;
	}
	
	.status{
		/*line-height: 30px;*/
		position: relative;
	}
	
	.status>div{
		padding-left: 30px;
		color:#464B4E;
	}
	.status .mui-icon{
		font-size:26px;
		position: absolute;
		top:-5px;
		left:0px;
	}
	.status:before{
		height: 0;
	}
	.mui-media{
		background: #FAFAFA;
	}
	
	.mui-card{
		margin:0 0 10px;
	}
</style>
{/block}

{block name="main"}
	<div class="index" v-cloak>
		<div class="box"  v-if="list.length > 0">
			<div class="mui-card" v-for="item in list">
				<!--页眉，放置标题-->
				<div class="mui-card-header business-name">
					<div class="mui-col-xs-12 mui-text-left">
						<i class="mui-icon iconfont icon-dianpu"></i>
						&nbsp; {{item.business_name}} &nbsp;
						<i class="mui-icon mui-icon-arrowright"></i>
					</div>
				</div>
				<!--内容区-->
				<div class="mui-card-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" :src="item.original_image">
								<div class="mui-media-body">
									<p class="mui-ellipsis-2">{{item.goods_name}}</p>
									<p class='mui-ellipsis'>{{item.spec_name}}</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="mui-card-footer status">
					<div class="mui-col-xs-12 mui-text-left">
						<i class="mui-icon text-theme iconfont icon-tuikuantuihuo" v-if="item.type == 1"></i>
						<i class="mui-icon text-theme iconfont icon-servicewuyoutuihuanhuo1" v-if="item.type == 2"></i>
						<i class="mui-icon text-theme iconfont icon-quannianbaohuan" v-if="item.type == 3"></i>
						 &nbsp; {{item.type_text}} {{item.status_text}}
					</div>
				</div>
				<!--页脚，放置补充信息或支持的操作-->
				<div class="mui-card-footer">
					<div class="mui-col-xs-12 mui-text-right">
						<!--不是已经取消或者结束的才能取消-->
						<a href="" class="mui-btn mui-btn-theme mui-btn-outlined" @tap.prevent="cancel(item)" v-if="item.status != 0 && item.status != 2">撤销申请</a>
						<a :href="'/mobile/aftersales/detail/id/'+item.id" class="mui-btn mui-btn-theme mui-btn-outlined">查看详情</a>
					</div>
				</div>
			</div>
		</div>
		<div class="no-data" v-else>没有相关数据</div>
	</div>
{/block}
{block name="script"}
<script>
	var new_vue = new Vue({
		el: '.index',
		data: {
			list: [],
		},
		mounted: function(){
			this.get_list();
		},
		methods: {
		    //获取售后列表
			get_list: function(){
			    layer.open({
				    type: 2,
				    shadeClose: false
			    })

			    var that = this;
			    request(that, {'url': 'after_sales/index'}, function(res) {
					layer.closeAll();
					if(res.code == 200) {
				        that.list = res.data;
				    } else {
				    	mui.alert('提示', res.msg, function(){
				    		mui.back();
				    	})
				    }
			    });
			},
			//取消售后申请
            cancel: function(item) {
			    var that = this;
			    mui.confirm('确定撤销该申请吗？','提示',['确定', '取消'], function(e){
			        if(e.index == 0) {
			            layer.open({
				            type: 2,
				            shadeClose:false
			            });

					    request(that, {'url': 'after_sales/cancel', 'data': {'id':item.id}}, function(resData) {
							if(resData.code == 200) {
                                mui.alert(resData.msg, '提示', function(){
                                    that.get_list();
                                })
                            } else {
                                mui.alert(resData.msg,'提示');
                            }
					    });

			        }
			    })
            }
		}
	});
</script>
{/block}
